/*
*
* Slider
*
* Mootools
*
*/

/*
* example
*
*
    <div id="slide" slide:title="Click me" slide:url="url">
            <p>Slide in/out as you can</p>
            <input type="text" id="money" class="widget-money" name="money" value="100,2"><br />
            <input type="text" id="money" class="widget-money" name="money" value="100,2"><br />
            <input type="text" id="money" class="widget-money" name="money" value="100,2"><br />
            <input type="text" id="money" class="widget-money" name="money" value="100,2"><br />
            <input type="text" id="money" class="widget-money" name="money" value="100,2"><br />
    </div>
*/

var Slider = new Class({
    Implements: [Options, Events],
    debug: false,
    remote: false,
    content: undefined,
    options: {
        open: false, // Closed by default
        url: undefined,
        title: 'Click to open',
        refresh: true
    },

    initialize: function(target, options) {
        this.setOptions(options);
        this.target = target;
        this.url = this.target.get('slide:url') || this.options.url;
        this.open = Boolean(this.target.get('slide:open')) || this.options.open;
        this.remote = this.url ? true : false;
        this.content = '';

        // Build DOM
        this.target.addClass('sliderOutside');
        this.target.set('style', 'position:relative');

        if(!this.remote) {
            // Use local html, store it for later
            this.content = this.target.innerHTML;
        }
        this.target.innerHTML='';

        // Build title
        this.titleElement = new Element('div', {
            class: 'sliderButton button',
        });
        this.toolsSpan = new Element('div', {
            style: 'width: 20px; text-align: center; font-weigth: bold;float:left;',
        }).inject(this.titleElement, 'inside');

        // Should we add a reload button?
        if(this.url && this.options.refresh) {
            this.reloadSpan = new Element('span', {
                style: 'width: 25px; text-align: center; font-weight: bold;float:right;',
                html: '&#x27F3;'
            }).inject(this.titleElement, 'inside');

            // Reload inside
            this.reloadSpan.addEvent('click', function() {
                this.fill();
            }.bind(this));
        }

        this.titleSpan = new Element('div', {
            style: 'border:0px solid black;height:2em;',
            html: ""+this.target.get('slide:title') || this.options.title
        }).inject(this.titleElement, 'inside');

        this.titleElement.inject(this.target, 'top');

        // Build body
        this.containerElement = new Element('div', {
            class: 'sliderContainer'
        });
        this.containerElement.inject(this.titleElement, 'after');

        // Build Slider
        this.sliderObj = new Fx.Slide(this.containerElement);
        if (!this.open) {
            this.sliderObj.hide();
        }

        // Events
        // On complete (load finished) fix tools symbol
        this.sliderObj.addEvent('complete', function() { this.toolsSymbol()}.bind(this));

        // Toggle on click
        this.titleSpan.addEvent('click', function() {
            this.sliderObj.toggle();
        }.bind(this));

        this.toolsSpan.addEvent('click', function() {
            this.sliderObj.toggle();
        }.bind(this));



        // Fix tools Symbol on first render
        this.toolsSymbol();
        //
        // Fill content
        // this.containerElement.html
        this.fill();
    },
    fill: function() {
        if (this.remote) {
            this.load();
        }
        this.containerElement.set('html', this.content);
    },
    toolsSymbol: function() {
        //
        //&#x27F3 - reload
        //&#x25E2 - closed
        //&#x25E5 - open
        //&#x25B6 - black arrow right
        //&#x25BC - black arrow down
        if(this.sliderObj.open) {
            this.toolsSpan.set('html','&hellip;');
        } else {
            this.toolsSpan.set('html','&bull;');
        }
    },
    load: function(url) {
        url = url ? url: this.url;
        new Request({
            async: false,
            evalScripts: true,
            url: url,
            onSuccess: function(responseText) {
                this.content = responseText;
            }.bind(this),
            onFailure: function() {
                this.content = 'Error loading: ' + this.url;
            }.bind(this)
        }).get();
    }
});

